<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市订单管理系统</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css" />
    <link type="text/css" rel="stylesheet" href="../css/public.css" />
</head>
<body>
<!--头部-->
<header class="publicHeader">
    <h1>超市订单管理系统</h1>
    <div class="publicHeaderR">
        <p>
            <span>下午好！</span><span style="color: #fff21b"> 用戶名</span> , 欢迎你！
        </p>
        <a href="#">退出</a>
    </div>
</header>
<!--时间-->
<section class="publicTime">
    <span id="time">2015年1月1日 11:11 星期一</span> <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
</section>
<!--主体内容-->
<section class="publicMian ">
    <div class="left">
        <h2 class="leftH2">
            <span class="span1"></span>功能列表 <span></span>
        </h2>
        <nav>
            <ul class="list">
                <li><a href="user_list.html">用户管理</a></li>
                <li><a href="#">供应商管理</a></li>
                <li><a href="#">订单管理</a></li>
                <li><a href="#">密码修改</a></li>
                <li><a href="#">退出系统</a></li>
            </ul>
        </nav>
    </div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>用户管理页面 &gt;&gt; 用户修改页面</span>
        </div>
        <div class="providerAdd">
            <form id="userForm" name="userForm" enctype="multipart/form-data" />
            <input name="id" type="hidden"/>
            <div>
                <label for="headImg">头像：</label>
                <input type="file" name="headImg" class="text" id="headImg" />
                <img id="headPic" height="100px"/>
            </div>
            <div>
                <label for="userCode">用户编码：</label>
                <input required type="text" name="usercode" class="text" id="usercode" onblur="checkUserCode()"/>
                <font color="red">*</font>
            </div>
            <div>
                <label for="userName">用户名称：</label>
                <input required type="text" name="username" id="username"/>
                <font color="red">*</font>
            </div>
            <div>
                <label for="userPassword">用户密码：</label>
                <input required type="password" name="userpassword" id="userpassword"/>
                <font color="red">*</font>
            </div>
            <div>
                <label>性别：</label>
                <input type="radio" name="gender" value="1" checked="checked" />男
                <input type="radio" name="gender" value="2" />女
                <font color="red">*</font>
            </div>
            <div>
                <label for="birthday">生日：</label>
                <input required type="date" name="birthday" id="birthday"/>
                <font color="red">*</font>
            </div>
            <div>
                <label for="phone">手机号码：</label>
                <input required type="text" name="phone" id="phone"/>
                <font color="red">*</font>
            </div>
            <div>
                <label for="address">地址：</label>
                <input required type="text" name="address" id="address"/>
                <font color="red">*</font>
            </div>
            <div class="providerAddBtn">
                <input type="submit" name="add" id="add" value="保存" />
                <input type="button" id="back" name="back" value="返回" onclick="history.go(-1);" />
            </div>
            </form>
        </div>
    </div>
</section>

<footer class="footer"> 版权归程龙 </footer>
<script src="../js/time.js"></script>
<script src="../js/jquery-3.5.1.js"></script>
<script src="../js/jquery.form.js"></script>
<script>
    var flag = false;
    var id ;

    loadData_user();

    $("form").submit(function () {
        checkUserCode();
        if (!flag){
            return false;
        }

        $("form").ajaxSubmit({
            url:"../user/updateUser",
            type:"post",
            dataType: "json",
            success:function (result) {
                if (result>0){
                    alert("修改成功");
                    location.href = "user_list.html";
                }
            },
            error:function (jqxhr) {
                alert("请求错误:"+jqxhr.status);
            }
        });
        return false;
    }) ;
    //校验用户名是否可用
    function checkUserCode(){
        var usercode = $("#usercode").val();
        $.ajax({
            url:"../user/checkUserCodeOfId/"+usercode+"/"+id,
            async: false,//同步方式提交
            dataType:"json",
            success:function(result){
                if(result>0){
                    $("#usercode").next().text("×用户编码已存在").css("color","red");
                    flag = false;
                }else{
                    $("#usercode").next().text("√可以使用").css("color","green");
                    flag = true;
                }
            },
            error:function(jqxhr){
                alert("请求错误："+jqxhr.status);
            }
        });
    }

    function loadData_user() {
        var href = location.href;
        id = href.substring(href.lastIndexOf("=")+1);

        $("[name = 'id']").val(id);
        $.ajax({
            url:"../user/getUserById/"+id,
            dataType:"json",
            success:function(result){
                //渲染数据
                renderDate(result);
            },
            error:function(jqxhr){
                alert("请求错误："+jqxhr.status);
            }
        });
    }
    function renderDate(user) {
        if(user.headImgName != null){
            $("#headPic").attr("src","../upload/"+user.headImgName);
        }else{
            $("#headPic").remove();
        }

        $("#usercode").val(user.usercode);
        $("#username").val(user.username);
        $("#userpassword").val(user.userpassword);
        $("#birthday").val(user.birthday);
        $("#phone").val(user.phone);
        $("#address").val(user.address);
        if(user.gender == 1){
            $("[name='gender']:first").attr("checked","checked");
        }else{
            $("[name='gender']:eq(1)").attr("checked","checked");
        }
    }
</script>
</body>
</html>